<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zhouxuan</title>

    <link rel="shortcut icon" href="./img/icon.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/public.css">

    <base target="_blank">
    <style>
        .box {
            padding: 10px;
            margin: 10px;
            border-radius: 10px;
            width: clamp(200px, 50vw, 400px);
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            float: left;
        }

        .button {
            color: rgb(12, 110, 53);
            text-decoration: none;
            background-color: aquamarine;
            padding: 5px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <button @click="test">test</button> -->
        <div class="box" v-for="box_index in box_item.length" :style='{"background": box_item[box_index-1].background}'>
            <a :href='box_item[box_index-1].url' class="button">{{box_item[box_index-1].text}}</a>
        </div>

        <div class="box">
            <button class="button" ref="btnText" @click="showCodeInput">test</button>
            <div v-if="true">
                <!-- <input type="text" v-model="inputCode" @keyup.enter="handleSubmit">
                <button @click="handleSubmit">确认</button> -->
            </div>
        </div>
    </div>
</body>

<script src="./js/vue.js"></script>
<script>
    const range = function* (start, stop, step = 1) {
        if (!stop) {
            stop = start;
            start = 0;
        }
        if (step == 0) {
            return;
        }
        for (let i = start; i < stop; i += step) {
            yield i;
        }
    }
    const enumerate = function* (iterator) {
        let i = 0;
        for (let item of iterator) {
            yield [i, item];
            i++;
        }
    }

    const vm = new Vue({
        el: '#app',
        data() {
            return {
                box_item: [
                    { text: '电影搜索 / 外卖红包', background: 'url(./img/background/film.webp) 35% center / cover', url: 'https://i69.top/o2GF' },
                    { text: '文本处理', background: 'aliceblue', url: './src/text_processing.html' },
                ],
                inputCode: '',
            }
        },
        created() {
            // console.log('range');
            // for (let i of range(1, 3)) {
            //     console.log(i);
            // }
            // console.log('enumerate');
            // for (let [i, v] of enumerate(range(3, 5))) {
            //     console.log(i, v);
            // }
        },
        mounted() {
            // const boxs = document.querySelectorAll('.box');
            // for (let i of range(boxs.length)) {
            //     // if (this.box_item[i].background) {
            //     //     boxs[i].setAttribute('style', '--url: ' + this.box_item[i].background);
            //     // }
            // }
        },
        methods: {
            showCodeInput() {
                let str = this.$refs.btnText.innerText;
                let keyCode = '';
                for (i of range(str.length)) {
                    let code = str.charCodeAt(i);
                    keyCode += code;
                    console.log('%c 🍬 code', 'color:#465975', keyCode);
                }
            }
        },
    });
</script>

</html>